<template>
  <div class="common-list-container">
    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="never">
      <div class="search-header">
        <slot name="search-title">
          <span class="search-title">筛选</span>
        </slot>
        <div class="search-actions">
          <slot name="search-actions"></slot>
        </div>
      </div>
      <div class="search-form">
        <slot name="search-form"></slot>
      </div>
      <div class="search-buttons">
        <slot name="search-buttons"></slot>
      </div>
    </el-card>

    <!-- 操作区域 -->
    <el-card class="action-card" shadow="never">
      <div class="action-header">
        <slot name="action-title">
          <span class="action-title">数据列表</span>
        </slot>
        <div class="action-buttons">
          <slot name="action-buttons"></slot>
        </div>
      </div>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card" shadow="never">
      <div class="table-container">
        <slot name="table"></slot>
      </div>
      <div class="pagination-container">
        <slot name="pagination"></slot>
      </div>
    </el-card>
  </div>
</template>

<script setup>
// 通用列表组件，用于统一所有列表页面的样式
</script>

<style scoped>
.common-list-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.search-form {
  margin-bottom: 20px;
}

.search-buttons {
  display: flex;
  gap: 10px;
}

.action-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.action-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.table-card {
  border-radius: 8px;
}

.table-container {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}
</style>